<template>
  <div class="refund-apply">
    <el-form :inline="true" :model="formData" label-width="100px" label-position="right" >
      <el-form-item label="退款订单编号">
        <el-input @change="searchOrder" placeholder="退款订单编号" v-model="formData.sn" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="申请人手机号">
        <el-input @change="searchOrder" :maxlength="11" placeholder="申请人手机号" v-model="formData.mobile" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select @change="searchOrder" size="small" v-model="formData.status" clearable>
          <el-option v-for="(item, index) in orderlist" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退款类型">
        <el-select @change="searchOrder" size="small" v-model="formData.method" clearable>
          <el-option v-for="(item, index) in ordertype" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请退款日期">
        <el-date-picker
          v-model="formData.refundDate"
          @change="searchOrder"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          :default-time="['00:00:00','23:59:59']"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchOrder">搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="totaldata">
      <div class="left">
        <span>退款总数：{{totalRefundCount}}</span>
        <span>退款本金金额：{{refundSumMoney}}</span>
        <span>清零赠送金额：{{refundSumGiveMoney}}</span>
      </div>
    </div>

    <avue-crud
      ref="crud"
      :page="page"
      :data="dataList"
      :table-loading="dataListLoading"
      :option="tableOption"
      @size-change="sizeChange"
      @current-change="currentChange">
      <template slot-scope="scope" slot="orderNo">
        <div><span>{{scope.row.sn}}</span></div>
      </template>
      <template slot-scope="scope" slot="basicinfo">
        <div><span>姓名：{{scope.row.nickName}}</span></div>
        <div><span>手机号：{{scope.row.mobile}}</span></div>
      </template>
      <template slot-scope="scope" slot="refundamount">
        <div><span>{{scope.row.applyRefundMoney}}</span></div>
      </template>
      <template slot-scope="scope" slot="refunded">
        <div><span>{{scope.row.money}}</span></div>
      </template>
      <template slot-scope="scope" slot="cleargiftamount">
        <div><span>{{scope.row.giveMoney}}</span></div>
      </template>
      <template slot-scope="scope" slot="type">
        <div><span>{{scope.row.status==0?'待退款':scope.row.status==0?'待退款':scope.row.status==1?'全部退款成功':scope.row.status==2?'部分待退款':scope.row.status==3?'部分退款成功':scope.row.status==4?'取消申请':''}}</span></div>
      </template>
      <template slot-scope="scope" slot="cuttype">
        <div><span>{{scope.row.method==0?'原路退回':'线下打款'}}</span></div>
      </template>
      <template slot-scope="scope" slot="refundtime">
        <div><span>{{scope.row.refundDate}}</span></div>
      </template>
      <template slot-scope="scope" slot="operator">
        <div><span>操作人手机号：{{scope.row.opMobile}}</span></div>
        <div><span>操作账号：{{scope.row.opName}}</span></div>
      </template>
      
      <template slot-scope="scope" slot="menu">
        <el-button
          type="primary"
          size="small"
          @click.stop="lookup(scope.row)">查看</el-button>
      </template>
    </avue-crud>
    
    <el-dialog :visible.sync="dialogrefundinfo" width="70%" @close="tableData=[]">
      <el-table
        :data="tableData"
        border
        stripe
        :summary-method="getSummaries"
        show-summary
        style="width: 100%; margin-top: 0px">
        <el-table-column
          prop="sn"
          label="充值订单编号"
          width="160">
        </el-table-column>
        <el-table-column
          prop="price"
          label="充值本金金额">
        </el-table-column>
        <el-table-column
          prop="payDate"
          label="充值时间">
        </el-table-column>
        <el-table-column
          prop="refundDate"
          label="退款时间">
        </el-table-column>
        <el-table-column
          label="操作人"
          width="200">
          <template slot-scope="scope">
            <div>操作手机号：{{scope.row.opMobile}}</div>
            <div>操作账号：{{scope.row.opName}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="statusDecs"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="actualMoney"
          label="本次退款金额">
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
  import { tableOption } from '@/crud/refund/refundlist'
  export default {
    components: {
      
    },
    data () {
      return {
        dataListLoading: false,
        formData: {
          sn: '',
          status: '',
          method: '',
          mobile: '',
          refundDate: [],
          startTime: '',
          endTime: '',
        },
        orderlist: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '部分退款',
            value: 3
          },
          {
            label: '全部退款',
            value: 1
          },
          {
            label: '已取消',
            value: 4
          }
        ],
        ordertype: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '原路退回',
            value: 0
          },
          {
            label: '线下打款',
            value: 1
          }
        ],
        dataList: [],
        totalRefundCount: '',
        refundSumMoney: '',
        refundSumGiveMoney: '',
        tableOption: tableOption,
        page: {
          total: 0, // 总条数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        dialogrefundinfo: false,
        tableData: []
      }
    },
    mounted() {
      this.getrefundlist(this.page, this.formData)
    },
    methods: {
      // 获取退款列表
      getrefundlist(page,params){
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/refund/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              params
            )
          )
        }).then(({ data }) => {
          this.totalRefundCount = data.data.totalRefundCount
          this.refundSumMoney = data.data.refundSumMoney
          this.refundSumGiveMoney = data.data.refundSumGiveMoney
          this.page.total = data.data.memberRefundIPage.total
          this.dataList = data.data.memberRefundIPage.records
          this.dataListLoading = false
        }).catch(err => {
          console.log(err,"err")
        })
      },

      // 条件搜索
      searchOrder(){
        console.log(this.formData)
        if(this.formData.refundDate){
          this.formData.startTime = this.formData.refundDate[0]
          this.formData.endTime = this.formData.refundDate[1]
        }else {
          this.formData.startTime = ''
          this.formData.endTime = ''
        }
        this.getrefundlist(this.page, this.formData)
      },

      // 查看
      lookup(val){
        this.dialogrefundinfo = true
        console.log(val)
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/refund/query/detail'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                id: val.id
              },
            )
          )
        }).then(( res ) => {
          console.log(res,"res")
          this.tableData = res.data.data
        }).catch(err => {
          console.log(err,"err")
        })
      },

      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (index === columns.length - 1) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = '';
          }
        });
        return sums;
      },

      sizeChange(val){
        this.page.pageSize=val
        this.getrefundlist(this.page, this.formData)
      },
      currentChange(val){
        this.page.currentPage=val
        this.getrefundlist(this.page, this.formData)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .totaldata {
    width: 99%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 16px;
    background: #f3f3f3;
    .left {
      line-height: 32px;
      height: 32px;
      span {
        margin-right: 20px;
      }
    }
  }
</style>
